import React, { Component } from 'react';
import { Button } from 'antd';
import { Rnd } from 'react-rnd';
import FormWrapper from '../../components/FormWrapper';

class MockPage extends Component {
  static defaultProps = {
    imgList: [
      {
        url:
          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125791419,1561105245&fm=26&gp=0.jpg',
        key: 'img_1',
      },
      {
        url:
          'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125791419,1561105245&fm=26&gp=0.jpg',
        key: 'img_2',
      },
    ],
    containerStyle: {
      width: 375,
      height: 707,
    },
    hotAreas: [
      {
        x: 0,
        y: 0,
        xRate: 0,
        yRate: 0,
        width: 20,
        height: 20,
        partId: 'form_0',
        type: 'url',
      },
    ],
  };
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      width: 20,
      height: 20,
      x: 0,
      y: 0,
      hotAreas: this.props.hotAreas,
    };
    this.forms = [];
  }

  getFormRef = partId => {
    if (!this.forms[partId]) {
      this.forms[partId] = React.createRef();
    }
    return this.forms[partId];
  };
  renderForm() {
    const { hotAreas } = this.state;
    return hotAreas.map(item => {
      const ref = this.getFormRef(item.partId);
      return <FormWrapper key={item.partId} formData={item} ref={ref} />;
    });
  }
  verifyForm = partId => {
    return new Promise((resolve, reject) => {
      const form = (this.forms[partId] || {}).current;
      if (form && form.validateFieldsAndScroll) {
        form.validateFieldsAndScroll((errs, fields) => {
          if (errs) {
            reject(errs);
          }
          resolve(fields);
        });
      } else {
        resolve(null);
      }
    });
  };
  verifyAllForm = () => {
    const formKeys = Object.keys(this.forms);
    return Promise.all(formKeys.map(this.verifyForm));
  };
  submitForm = () => {
    this.verifyAllForm().then(values => {
      console.log(values, 'valuesx');
      console.log(this.state.hotAreas, 'hotAreas');
    });
  };
  renderHotArea = (hotArea, index) => {
    const style = {
      border: 'solid 1px #ddd',
      background: '#f0f0f0',
      opacity: 0.5,
    };
    return (
      <Rnd
        key={index}
        style={{ zIndex: 9, ...style }}
        cancel="body"
        className="hotarea-rnd"
        bounds="parent"
        minWidth={60}
        minHeight={60}
        // default={{
        //     x: 0,
        //     y: 0,
        //     width: 100,
        //     height: 20
        // }}
        size={{ width: hotArea.width, height: hotArea.height }}
        position={{ x: hotArea.x, y: hotArea.y }}
        onDragStop={(e, d) => {
          const { hotAreas } = this.state;
          hotAreas[index].x = d.x;
          hotAreas[index].y = d.y;
          hotAreas[index].xRate = d.x / 375;
          hotAreas[index].yRate = d.y / 667;

          this.setState({ hotAreas });
        }}
        onResizeStop={(e, direction, ref, delta, position) => {
          const { hotAreas } = this.state;
          hotAreas[index].width = ref.style.width;
          hotAreas[index].height = ref.style.height;
          this.setState({ hotAreas });
        }}
      >
        {index}
      </Rnd>
    );
  };
  render() {
    const { imgList = [], containerStyle } = this.props;
    const { hotAreas } = this.state;
    return (
      <div style={{ position: 'relative', height: '100vh' }}>
        <div
          style={{
            position: 'absolute',
            width: 400,
            padding: 20,
          }}
        >
          {this.renderForm()}
          <Button onClick={this.submitForm}>提交表单</Button>
        </div>
        <div
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            ...containerStyle,
            transform: 'translateX(-50%) translateY(-50%)',
          }}
        >
          <div style={{ height: 40 }}>
            <Button
              onClick={() => {
                const newHotAreas = [...hotAreas];
                newHotAreas.push({
                  x: 0,
                  y: 0,
                  xRate: 0,
                  yRate: 0,
                  width: 20,
                  height: 20,
                  partId: `form_${newHotAreas.length}`,
                  type: 'url',
                });
                this.setState({
                  hotAreas: newHotAreas,
                });
              }}
            >
              添加热区
            </Button>
          </div>
          <img
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1125791419,1561105245&fm=26&gp=0.jpg"
            style={{ width: 375, height: 667 }}
            alt=""
          />
          <div
            style={{
              position: 'absolute',
              top: 40,
              height: 667,
              width: '100%',
            }}
          >
            {hotAreas.map(this.renderHotArea)}
          </div>
        </div>
      </div>
    );
  }
}

export default MockPage;
